<template>
  <div>
    <div ref="scroll_box" @scroll="onScroll" class="article-list">
      <!-- 上拉列表 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- cell -->
          <van-cell
            @click="$router.push(`/detail/${item.art_id}`)"
            v-for="item in list"
            :key="item.art_id"
            :title="item.title"
          >
            <!-- 使用插槽来自定义内容 -->
            <template #title>
              <div class="title">{{ item.title }}</div>
              <van-grid :border="false" :column-num="item.cover.type">
                <van-grid-item
                  v-for="(pic, index) in item.cover.images"
                  :key="index"
                >
                  <van-image :src="pic" />
                </van-grid-item>
              </van-grid>
              <div class="info-box">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ $relvTime(item.pubdate) }}</span>

                <van-icon style="float: right" name="cross" />
              </div>
            </template>
          </van-cell> </van-list
      ></van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { articleListAPI } from '@/api/article'
export default {
  name: 'MyArticle',
  props: {
    channel_id: {
      required: true,
      type: Number
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      // 第一次请求最新的时间戳
      timestamp: Date.now(),
      isLoading: false,
      scrollTop: 0
    }
  },
  activated () {
    // 把保存的滚出去的距离，再交给div的scrollTop
    this.$refs.scroll_box.scrollTop = this.scrollTop
  },
  methods: {
    onScroll () {
      // 把当前滚动条记录起来
      this.scrollTop = this.$refs.scroll_box.scrollTop
    },
    async onLoad () {
      // 一开始就调用 所以可以在这里发请求
      // 需要传入参数 父传子
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })
      // console.log(res)
      // 之后每次都加载都赋值上一段时间戳
      this.timestamp = res.data.pre_timestamp

      // 赋值：会把原来的值给覆盖掉
      // 因为每次请求来只有10条，所以不断的在覆盖10条
      // this.list = res.data.results
      // 为了不覆盖要用push，并且为了把数组中每一条加进来要加...
      this.list.push(...res.data.results)

      // 每次加载完记得把loading改为false
      this.loading = false

      // 迟早加载完全部数据 则最后一条之后上一段时间戳为null报错
      // 判断是否全部加载完
      if (this.timestamp == null) {
        this.finished = true
      }
    },
    async onRefresh () {
      // 每次下拉都应该把finished改为false
      this.finished = false
      // 发请求
      const res = await articleListAPI({
        channel_id: this.channel_id,
        // 下拉刷新每次都是要获取最新时间戳 写死
        timestamp: Date.now()
      })
      // 刷新赋值 最新的全部替换之前的 如果是要保留之前的 在前面加刷新的 unshift 看需求
      this.list = res.data.results
      // 刷新完数据记得把isLoading设置为false
      this.isLoading = false
      // 刷新完还是需要上拉看之前的 所有需要保存之前的时间戳
      this.timestamp = res.data.pre_timestamp
    }
  }
}
</script>

<style lang="less" scoped>
.article-list {
  position: fixed;
  width: 100%;
  top: 90px;
  bottom: 50px;
  overflow: auto;
}
.info-box {
  span {
    color: gray;
    font-size: 12px;
    &:nth-of-type(2) {
      margin: 0 15px;
    }
  }
}
</style>
